{extend name="$_admin_base_layout" /}
{block name="plugins-css"}
	<link rel="stylesheet" href="__LIBS__/bootstrap-datepicker/bootstrap-datepicker3.min.css?v=20200421">
  <link rel="stylesheet" href="__LIBS__/select2/select2.min.css?v=20200421">
  <link rel="stylesheet" href="__LIBS__/select2/select2-bootstrap.min.css?v=20200421">
  <link rel="stylesheet" href="__LIBS__/bootstrap3-editable/css/bootstrap-editable.css?v=20200421">
{/block}
{block name="style"}
<style>            
	#main {
		height: 520px;
		width: 100%;
		min-width: 960px;
	}
</style>
{/block}
{block name="content"}
<div class="block-header bg-gray-lighter">
	<h3 class="block-title">你的权限：{$user.role_name}</h3>
</div>
<div class="row push-15">
    <div class="col-sm-6 col-md-3">
        <a class="block block-link-hover3 text-center" href="{:url('goods/index')}">
            <div class="block-content block-content-full">
                <div class="h1 font-w700 text-primary" data-toggle="countTo" data-to="{$goods|default=0}"></div>
            </div>
            <div class="block-content block-content-full block-content-mini bg-gray-lighter text-muted">商品</div>
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a class="block block-link-hover3 text-center" href="{:url('order/index')}">
            <div class="block-content block-content-full">
                <div class="h1 font-w700 text-success" data-toggle="countTo" data-to="{$orders|default=0}"></div>
            </div>
            <div class="block-content block-content-full block-content-mini bg-gray-lighter text-muted">订单</div>
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a class="block block-link-hover3 text-center" href="{:url('user/member/index')}">
            <div class="block-content block-content-full">
                <div class="h1 font-w700 text-info" data-toggle="countTo" data-to="{$users|default=0}"></div>
            </div>
            <div class="block-content block-content-full block-content-mini bg-gray-lighter text-muted">用户</div>
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a class="block block-link-hover3 text-center" href="{:url('user/vip/index')}">
            <div class="block-content block-content-full">
                <div class="h1 font-w700 text-warning"><span data-toggle="countTo" data-to="{$vips|default=0}"></span></div>
            </div>
            <div class="block-content block-content-full block-content-mini bg-gray-lighter text-muted">会员</div>
        </a>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="block block-bordered">
			<div class="block-header bg-gray-lighter toolbar-btn-action">
			    <form class="form-builder echarts_form" style="display: inline-block;">
					<div class="form-inline" style="display: inline-block;">
					    <select class="js-select2 form-control select-change select-search" data-width="resolve" name="goods" id="select-merch">
					        <option value="0"{eq name="Request.param.goods" value="0"} selected="selected" {/eq}>全部</option>
					        {foreach $goods_list as $key =>$value}
					        <option value="{$key}"{eq name="Request.param.goods" value="$key"} selected="selected"{/eq}>{$value}</option>
					        {/foreach}
					    </select>
					</div>
					<div class="form-inline time-filter">
					    <div class="time-filter">
					        <div class="input-daterange input-group" data-date-format="yyyy-mm-dd">
					            <input class="form-control" type="text" id="time_from" name="time_from" value="" placeholder="yyyy-mm-dd" autocomplete="off">
					            <span class="input-group-addon"><i class="fa fa-chevron-right"></i></span>
					            <input class="form-control" type="text" id="time_to" name="time_to" value="" placeholder="yyyy-mm-dd" autocomplete="off">
					        </div>
					    </div>
					</div>
				</form>
				<div class="form-inline"  style="display: inline-block;">
				    <button type="button" id="setOption" class="btn btn-default">确定</button>
				</div>
			</div>
            <div class="block-content">
                <div class="row" id="main">
                    
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__LIBS__/bootstrap-datepicker/bootstrap-datepicker.min.js?v=20200421"></script>
<script src="__LIBS__/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js?v=20200421"></script>
<script src="__LIBS__/select2/select2.full.min.js?v=20200421"></script>
<script src="__LIBS__/bootstrap3-editable/js/bootstrap-editable.js?v=20200421"></script>
<script src="__ADMIN_JS__/core/jquery.countTo.min.js"></script>
<script src="__STATIC__/js/echarts.min.js"></script>
<script>
    jQuery(function () {
        App.initHelpers(['appear-countTo']);
		App.initHelpers(["datepicker","select2"]);
    });
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	myChart.setOption({
		title: {left:20},
		tooltip: {trigger: 'axis'},
		toolbox: {
			show: true,
			feature: {
				dataZoom: {
					yAxisIndex: 'none'
				},
				dataView: {readOnly: false},
				magicType: {type: ['line', 'bar']},
				restore: {show: false},
				saveAsImage: {}
			}
		},
		legend: {orient: 'vertical', right:0, top:60},
		series: []
	});
	// 使用刚指定的配置项和数据显示图表。
	$("#setOption").on("click", function(){
		var post = $(".echarts_form").serializeArray();
		// console.log(post);
		setCharts(post);
	})
	var setCharts = function(data){
		myChart.showLoading();
		$.post("", data, function(res){
			if (res.code == 0){
				mindEnv.notify(res.msg, 'danger');
			} else {
				// 填入数据
				myChart.setOption(res.data);
			}
			myChart.hideLoading();
		});
	}
	setCharts();
</script>
{/block}